<template>
  <!-- 主体商铺展示内容 -->
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <!-- router-link必须有to的属性 -->
    <router-link v-for="(item, index) in nearbyList" :key="index" :to="`/shop/${item.id}`">
      <!-- 主体商铺展示内容 -->
      <ShopInfo :item="item" />
    </router-link>
  </div>
</template>

<script>
  import { ref } from 'vue'
  // import { useRouter } from 'vue-router'
  import { get } from '@/utils/request'
  import ShopInfo from '@/components/ShopInfo/ShopInfo.vue'
  const useNearbyListEffect = () => {
    const nearbyList = ref([])
    const getNearbyList = async () => {
      try {
        const resultData = await get('/api/user/hot_list')
        if (resultData?.code === 200 && resultData?.data?.length) {
          resultData.data.forEach(item => {
            nearbyList.value.push({
              id: item?.id,
              title: item?.name,
              headImg: item?.imgUrl,
              sales: item?.sales,
              expressLimit: item?.expressLimit,
              expressPrice: item?.expressPrice,
              highlight: item?.slogon
            })
          })
        } else {
          console.log('暂无数据')
        }
      } catch (e) {
        console.log('数据请求失败')
      }
    }

    return { nearbyList, getNearbyList }
  }
  export default {
    name: 'Nearby',
    components: { ShopInfo },
    setup() {
      const { nearbyList, getNearbyList } = useNearbyListEffect()
      getNearbyList()
      return {
        nearbyList
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables';
  @import '@/style/mixins';
  .nearby {
    &__title {
      margin: 0.16rem 0 0.02rem 0;
      font-size: 0.18rem;
      color: $content-font-color;
      font-weight: normal; //不加粗展示
    }
    a {
      text-decoration: none;
    }
  }
</style>
